<template>
  <teleport v-if="showFlag" :to="teleport">
    <el-dialog v-model="showFlag" :destroy-on-close="destroyOnClose" :modal-append-to-body="modalAppendToBody"
      :append-to-body="appendToBody" :fullscreen="fullscreen" custom-class="my-dialog" :title="title" :show-close="true"
      :close-on-press-escape="false" :close-on-click-modal="false" :width="width" @closed="close">
      <div :style="bodyStyle ? bodyStyle : defaultStyle">
        <slot />
      </div>
      <template v-if="showBtn" #footer>
        <div class="dialog-footer">
          <el-button size="small" icon="circleClose" @click="close">取 消</el-button>
          <el-button size="small" icon="circleCheck" type="primary" :disabled="btnDisabled" @click="confirm">确
            定</el-button>
        </div>
      </template>
    </el-dialog>
  </teleport>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  title: String,
  teleport: {
    type: String,
    default: () => '.admin-box'
  },
  show: {
    type: Boolean,
    default: false
  },
  showBtn: {
    type: Boolean,
    default: true
  },
  btnDisabled: {
    type: Boolean,
    default: false
  },
  fullscreen: {
    type: Boolean,
    default: false
  },
  appendToBody: {
    type: Boolean,
    default: false
  },
  modalAppendToBody: {
    type: Boolean,
    default: true
  },
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  bodyStyle: {
    type: Object,
    default: () => {
      return null
    }
  },

  width: ''
})
const emit = defineEmits(['close', 'update:show', 'confirm'])
const defaultStyle = {
  maxHeight: '60vh', overflow: 'auto', padding: '0 12px'
}
const showFlag = ref(props.show)

const close = () => {
  showFlag.value = false
  emit('update:show', false)
  emit('close')
}
const confirm = () => {
  emit('confirm')
}
</script>
<style lang="scss">
.el-dialog {
  &.my-dialog {
    padding: 0;

    .el-dialog__header {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      height: 46px;
      padding: 0 20px;

      &::before {
        display: block;
        content: '';
        height: 18px;
        width: 4px;
        background-color: #FF9C00;
        margin: 0 10px 0 0;
      }

      .el-dialog__title {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      .el-dialog__headerbtn {
        top: 11px;
        right: 13px;

        .el-dialog__close {
          color: #999999;
          font-size: 20px;

          &:hover {
            color: #48b27a;
          }
        }
      }
    }
  }
}
</style>
